<template>
  <div class="storeheader">
    <span><router-link to="/">梧桐时代</router-link></span>
    <span><router-link to="/Login">登录</router-link></span>
    <span v-on:click="clickTip">免费注册</span>
    <ul>
      <li>我的梧桐</li>
      <li>购物车0</li>
      <li>关注梧桐</li>
      <li>帮助中心</li>
      <li>收藏本站</li>
      <li class="sjzx" @mouseenter="enter3($event)" @mouseleave="leave3($event)">商家中心</li>
      <div class="shangjia" @mouseenter="enter4($event)" @mouseleave="leave4($event)">
        <p>商家登陆</p>
        <p>商家登陆</p>
        <p>商家登陆</p>
      </div>
    </ul>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        login: false
      }
    },
    methods: {
      clickTip: function () {
        if (!this.login) {
          this.$router.push({path: '/Login'})
        }
      },
      enter3: function (e) {
        $('.shangjia').show()

      },
      leave3: function (e) {
        $('.shangjia').hide()
      },
      enter4: function (e) {
        $(e.currentTarget).show()
        $('.sjzx').addClass('activesa')

      },
      leave4: function (e) {
        $(e.currentTarget).hide()
        $('.sjzx').removeClass('activesa')
      }
    }
  }
</script>

<style scoped>
  .storeheader {
    width: 100%;
    height: 50px;
    background: #eaeaea;
  }

  .storeheader span {
    width: 10%;
    height: 50px;
    line-height: 50px;
    float: left;
    color: #4b4b4b;
  }

  .storeheader span:hover {
    cursor: pointer;
  }

  .storeheader ul {
    width: 55%;
    height: 50px;
    float: right;
    line-height: 50px;
    position: relative;
  }

  .storeheader ul li {
    width: 13%;
    height: 50px;
    line-height: 50px;
    display: inline-block;
    margin-left: -3px;
  }

  .storeheader ul li:nth-child(6) {
    width: 20%;
  }

  .storeheader ul li:hover {
    color: red;
    cursor: pointer;
    background: #ffffff;
  }

  .storeheader ul .shangjia {
    width: 130px;
    height: 150px;
    background: #eeeeee;
    position: absolute;
    top: 50px;
    left: 73%;
    display: none;
  }

  .storeheader ul .shangjia p:hover {
    cursor: pointer;
    background: #ffffff;
    color: red;
  }

  .storeactivesa {
    background: #ffffff;
    color: red;
  }
</style>
